<template>
    <div>
        <Button v-if="showBackBtn" class="goBack" type="primary" @click="$router.back()"><Icon type="ios-arrow-back" /> 返回  </Button>
        <Card>
            <Form ref="formCustom" :model="formCustom"   :rules="ruleCustom" :label-width="100"  class="confirmed-form" >
                <Row>
                    <Col span="7">
                        <Form-item  label="姓名"  prop="name">
                            <Input type="text" v-model="formCustom.name" placeholder="输入姓名"></Input>
                        </Form-item>
                    </Col>
                    <Col span="7">
                        <FormItem  span="8" label="性别"  prop="gender">
                            <RadioGroup v-model="formCustom.gender" placeholder="选择性别">
                                <Radio label="male">男</Radio>
                                <Radio label="female">女</Radio>
                            </RadioGroup>
                        </FormItem>
                    </Col>
                    <Col span="7">
                        <Form-item  span="8" label="年龄"   prop="age">
                            <Input type="number" number v-model="formCustom.age" placeholder="输入年龄"></Input>
                        </Form-item>
                    </Col>
                </Row>
                <Row>
                    <Col span="7">
                        <Form-item label="职业"  prop="job">
                            <Input type="text"  v-model="formCustom.job" placeholder="输入职业"></Input>
                        </Form-item>
                    </Col>
                    <Col span="7">
                        <Form-item label="所在街道"  prop="street_id">
                            <Select v-model="formCustom.street_id"  placeholder="选择街道"  filterable>
                                <Option v-for="item in streetList" v-model="item.id" :key="item.id">{{ item.street }}</Option>
                            </Select>
                        </Form-item>
                    </Col>
                    <Col span="7">
                        <Form-item label="上报时间"  prop="imp_date" placeholder="选择上报时间" >
                            <DatePicker type="date" format="yyyy-MM-dd" @on-change="dateChange($event)" :options="timeLimit"
                                        :value="formCustom.imp_date"   placeholder="选择上报时间" ></DatePicker>
                        </Form-item>
                    </Col>
                </Row>
            </Form>
            <div class="line-button"  v-if="!showDetail" >
                <Button type="primary"  @click="validateForm('formCustom')" >保存</Button>
            </div>
        </Card>
        <!--是否确认保存-->
        <Modal v-model="affirmModal" title="确认操作" width="20"  @on-ok="handleSave"  >
            <div style="text-align:center">
                <p>是否确认保存</p>
            </div>
        </Modal>

    </div>
</template>

<script>
import { getStreetData } from '@/api/outbreak-management/public'
import { getInformation, insert, updateInfo } from '@/api/outbreak-management/outbreak-surveillance/confirmed'
// 确诊人员添加
export default {
  data () {
    const validateInt = (rule, value, callback) => {
      if (value % 1 !== 0) {
        callback(new Error('请输入正确年龄'))
      } else {
        callback()
      }
    }
    return {
      // 时间限制 不可选择当天之前
      timeLimit: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      },
      // 街道列表
      streetList: [],
      // 确诊人员信息
      formCustom: {
        name: '',
        gender: '',
        age: '',
        job: '',
        imp_date: ''
      },
      ruleCustom: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 0, max: 12, message: '姓名长度不能超过12位', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        age: [
          { required: true, type: 'number', message: '年龄必填', trigger: 'blur' },
          { validator: validateInt, trigger: 'blur' },
          { min: 0, max: 150, type: 'number', message: '请输入正确年龄', trigger: 'blur' }
        ],
        job: [
          { required: true, message: '请输入职业', trigger: 'blur' },
          { min: 0, max: 32, message: '职业长度不能超过32位', trigger: 'blur' }
        ],
        street_id: [
          { required: true, type: 'number', message: '所属街道必选', trigger: 'change' }
        ],
        imp_date: [
          { required: true, message: '上报时间必填', trigger: 'blur' }
        ]
      },
      // 确认弹出框
      affirmModal: false,
      // 控制保存按钮显隐
      showDetail: false,
      // 控制回退按钮显示
      showBackBtn: false,
      // 当前人员id
      id: ''
    }
  },
  mounted () {
    this.getStreet()
    this.isEditStatus()
  },
  methods: {
    // 日期转字符串
    dateChange (date) {
      this.formCustom.imp_date = date
    },
    // 重置
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    // 表单校验
    validateForm (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.affirmModal = true
        } else {
          this.$Message.warning('操作失败!')
        }
      })
    },
    // 保存
    handleSave (name) {
      let streetList = this.streetList
      let confirmedData = this.formCustom
      let streetData = streetList.find((item) => { return item.id === confirmedData.street_id })
      confirmedData.area_id = streetData.pid
      if (this.showBackBtn) {
        confirmedData.id = this.id
        this.handleEdit(confirmedData)
      } else {
        this.handleAdd(confirmedData)
      }
    },
    // 新增
    handleAdd (confirmedData) {
      insert(confirmedData).then(({ data }) => {
        let { errcode } = data
        if (errcode === 0) {
          this.$Message.success('添加成功')
        } else {
          this.$Message.warning('操作失败!')
        }
      })
    },
    // 修改
    handleEdit (confirmedData) {
      updateInfo(confirmedData).then(({ data }) => {
        let { errcode } = data
        if (errcode === 0) {
          this.$Message.success('更新成功')
        } else {
          this.$Message.warning('操作失败!')
        }
      })
    },
    // 获取街道列表
    getStreet () {
      getStreetData().then(res => {
        let { errcode, data } = res.data
        if (errcode === 0) {
          this.streetList = data
        } else {
          this.$Message.error('获取信息失败!')
        }
      })
    },
    // 获取个人信息
    getInfo () {
      getInformation({ id: this.id }).then(res => {
        let { errcode, data } = res.data
        if (errcode === 0) {
          data.imp_date = this.$common.moment(data.imp_date).format('YYYY-MM-DD')
          this.formCustom = data
        } else {
          this.$Message.success('获取信息失败！')
        }
      })
    },
    // 修改状态
    isEditStatus () {
      if (this.$route.query && this.$route.query.id) {
        this.showBackBtn = true
        this.id = this.$route.query.id
        this.getInfo()
        if (this.$route.query.showDetail) {
          this.showDetail = true
        }
      }
    }
  }
}
</script>
<style scoped lang="less">
    .confirmed-form{
        .ivu-date-picker{
            width: 100%;
        }
    }
    .line-button{
        display: flex;
        justify-content: flex-end;
    }
</style>
